<template>
  <div class="baseinfo">
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="任务模板名称" prop="templateName">
        <span v-if="taskType == 'view'">{{ ruleForm.templateName }}</span>
        <el-input
          v-else
          v-model="ruleForm.templateName"
          :maxlength="30"
          placeholder="请输入任务模板名称"
        />
      </el-form-item>
      <el-form-item label="报表名称" prop="reportName">
        <span v-if="taskType == 'view'">{{ ruleForm.reportName }}</span>
        <el-input
          v-else
          v-model="ruleForm.reportName"
          :maxlength="30"
          placeholder="请输入报表名称"
        />
      </el-form-item>
      <el-form-item label="模板类型" prop="templateType">
        <DictTag
          v-if="taskType == 'view'"
          :value="ruleForm.templateType"
          :options="task_template_type"
        />
        <el-select v-else v-model="ruleForm.templateType" placeholder="请选择模板类型" clearable>
          <el-option
            v-for="dict in task_template_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="版本" prop="version">
        <span v-if="taskType == 'view'">{{ ruleForm.version }}</span>
        <el-input v-else v-model="ruleForm.version" placeholder="请输入版本" />
      </el-form-item>
      <el-form-item label="执行人" prop="zxr">
        <p style="margin: 0">{{ ruleForm.zxr }}</p>
      </el-form-item>
      <el-form-item label="是否审核" prop="isAudit">
        <span v-if="taskType == 'view'">{{ ruleForm.isAudit == 1 ? "是" : "否" }}</span>
        <el-radio-group v-else v-model="ruleForm.isAudit">
          <el-radio value="1">是</el-radio>
          <el-radio value="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="审核岗位" prop="auditStation" v-if="ruleForm.isAudit == 1">
        <el-tooltip
          v-if="taskType == 'view'"
          popper-class="my-tooltip"
          class="box-item"
          effect="dark"
          :content="auditStationNames"
          placement="top-start"
        >
          <p style="margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
            {{ auditStationNames }}
          </p>
        </el-tooltip>
        <el-select v-else v-model="ruleForm.auditStation" multiple clearable placeholder="请选择">
          <el-option
            v-for="item in workStationList"
            :key="item.id"
            :label="item.workStationName"
            :value="item.id"
            :disabled="item.status == 1"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-tooltip
          v-if="taskType == 'view'"
          popper-class="my-tooltip"
          class="box-item"
          effect="dark"
          :content="ruleForm.remark"
          placement="top-start"
        >
          <p style="margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
            {{ ruleForm.remark }}
          </p>
        </el-tooltip>
        <el-input
          v-else
          v-model="ruleForm.remark"
          :maxlength="200"
          show-word-limit
          type="textarea"
          placeholder="请输入备注"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref, useAttrs, onMounted, getCurrentInstance } from "vue";
const attrs = useAttrs();
const formSize = ref("default");
const ruleFormRef = ref();
const { proxy } = getCurrentInstance();
const taskType = ref();
const auditStationNames= ref('')
const { task_template_type } = proxy.useDict("task_template_type");
import { listWorkStation } from "@/api/base/workstation";
const workStationList = ref([]);
let ruleForm = ref({});
const rules = reactive({
  templateName: [{ required: true, message: "请输入任务模板名称", trigger: "blur,change" }],
  reportName: [{ required: true, message: "请输入报表名称", trigger: "blur,change" }],
  templateType: [
    {
      required: true,
      message: "请选择模板类型",
      trigger: "change",
    },
  ],
  version: [{ required: true, message: "请输入版本", trigger: "blur,change" }],
  isAudit: [{ required: true, message: "请选择是否审核", trigger: "blur,change" }],
  auditStation: [{ type: "array", required: true, message: "请选择审核岗位", trigger: "change" }],
});

function submitForm() {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      return true;
    } else {
      return false;
    }
  });
}
/** 查询字典类型列表 */
function getListWorkStation() {
  const params = {
    pageNum: 1,
    pageSize: 999,
    workStationName: undefined,
  };
  listWorkStation(proxy.addDateRange(params)).then((response) => {
    workStationList.value = response.rows;
    let auditStationName = []
    if(ruleForm.value.auditStation && ruleForm.value.auditStation.length){
      workStationList.value.forEach(item=>{
        if(ruleForm.value.auditStation.includes(item.id) ){
          auditStationName.push(item.workStationName)
        }
      })
      
    }
    auditStationNames.value = auditStationName.join(',')
  });
}

onMounted(() => {
  const { data, type } = attrs;
  taskType.value = type;
  if (data) {
    ruleForm.value = data;
    if(ruleForm.value && ruleForm.value.auditStation){
      ruleForm.value.auditStation = ruleForm.value.auditStation.length?ruleForm.value.auditStation.split(','):[]
      ruleForm.value.auditStation = ruleForm.value.auditStation.map(Number)
    }
  }

  getListWorkStation();
});
defineExpose({ submitForm, ruleForm });
</script>
<style lang="scss" scoped>
.baseinfo {
  width: 600px;
  margin: 0 auto;
}
</style>
